<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <link rel="stylesheet" href="../../css/hero/hero.css">
  <!-- 引入js -->
  <script src="../../js/hero/hero.js"></script>

</head>

<body>
  <!-- 导航栏 -->
  <div class="nav">
    <h1>
      <a href=""></a>
    </h1>
    <div class="more"></div>
    <!-- 导航栏 -->
    <ul>
      <li>
        <!-- <a href="#"></a> -->
        <span>
          <a style="color: #fff;"
            href="file:///D:/%E7%AC%94%E8%AE%B0%E4%B9%8B%E5%89%8D%E7%AB%AF/1%E7%AC%94%E8%AE%B0%E4%B9%8BHTML%E5%92%8CCSS/code/day15/index.html">首页</a>
        </span>
        <span>HOME</span>
        <!-- 导航栏下拉菜单开始 -->

      </li>
      <li>
        <span>游戏资料</span>
        <span>DATA</span>
        <!-- 下拉菜单 -->
        <div class="drop-down">
          <ul>
            <li><a href="file:///D:/%E7%AC%94%E8%AE%B0%E4%B9%8B%E5%89%8D%E7%AB%AF/1%E7%AC%94%E8%AE%B0%E4%B9%8BHTML%E5%92%8CCSS/code/day15/src/version/version.html">版本专区</a></li>
            <li><a href="file:///D:/%E7%AC%94%E8%AE%B0%E4%B9%8B%E5%89%8D%E7%AB%AF/1%E7%AC%94%E8%AE%B0%E4%B9%8BHTML%E5%92%8CCSS/code/day15/src/hero/hero.html">英雄资料</a></li>
            <li><a href="file:///D:/%E7%AC%94%E8%AE%B0%E4%B9%8B%E5%89%8D%E7%AB%AF/1%E7%AC%94%E8%AE%B0%E4%B9%8BHTML%E5%92%8CCSS/code/day15/src/announce/announce.html">爆料站</a></li>
            <li><a href="file:///D:/%E7%AC%94%E8%AE%B0%E4%B9%8B%E5%89%8D%E7%AB%AF/1%E7%AC%94%E8%AE%B0%E4%B9%8BHTML%E5%92%8CCSS/code/day15/src/world/wallpaper.html">游戏壁纸</a></li>
            <li><a href="">世界观站</a></li>
          </ul>
        </div>
      </li>
      <li>
        <span>内容中心</span>
        <span>CONTENTS</span>
        <div class="drop-down">
          <ul>
            <li><a href="">攻略中心</a></li>
            <li><a href="">开放素材库</a></li>
            <li><a href="">N内容共创平台</a></li>
          </ul>
        </div>
      </li>
      <li>
        <span>赛事中心</span>
        <span>MATCH</span>
        <div class="drop-down">
          <ul>
            <li><a href="">HKPL</a></li>
            <li><a href="">K甲</a></li>
            <li><a href="">H挑战者杯</a></li>
            <li><a href="">全国大赛</a></li>
            <li><a href="">高校联赛</a></li>
            <li><a href="">N赛事授权</a></li>
            <li><a href="">N授权合作赛</a></li>
            <li><a href="">赛事数据</a></li>
          </ul>
        </div>
      </li>
      <li>
        <span>王者文化</span>
        <span>CULRURE</span>
        <div class="drop-down">
          <ul>
            <li><a href="">NIP共创计划</a></li>
            <li><a href="">N龙翼王者卡</a></li>
            <li><a href="">共创基地</a></li>
            <li><a href="">王者荣耀天天向上</a></li>
          </ul>
        </div>
      </li>
      <li>
        <span>玩家支持</span>
        <span>PLAYER</span>
        <div class="drop-down">
          <ul>
            <li><a href="">腾讯游戏防沉迷</a></li>
            <li><a href="">成长守护平台</a></li>
            <li><a href="">对局环境情报站</a></li>
            <li><a href="">客服专区</a></li>
            <li><a href="">礼包兑换</a></li>
            <li><a href="">自助服务</a></li>
            <li><a href="">商户特权</a></li>
            <li><a href="">手语打法参考</a></li>
          </ul>
        </div>
      </li>
      <li>
        <span>IP新游</span>
        <span>NEW&nbsp;GAMES</span>
        <div class="drop-down">
          <ul>
            <li><a href="">N王者荣耀世界</a></li>
            <li><a href="">N王者万象棋</a></li>
          </ul>
        </div>
      </li>
    </ul>
    <!-- <a class="down">下载游戏</a> -->
    <div class="login">
      <img src="../../assets/login.png" alt="">
      <span>欢迎登录</span>
    </div>
  </div>
  <!-- 导航栏下方图片 -->
  <div class="bg">
    <!-- <img src="./assets/bannerImage.webp"> -->
    <div class="check"></div>
  </div>
  <!-- 面包屑导航 -->
  <div class="crumbs">
    <img src="../../assets/wallpaper/主页.png">
    <a href="">王者荣耀首页</a>
    >
    <span> 英雄介绍</span>
  </div>

  <!-- 内容 -->
  <div class="container">
    <div class="herolist-title">
      英雄介绍
    </div>
    <ul class="herolist-nav">
      <li class="active">英雄</li>
      <li>局内道具</li>
      <li>召唤师技能</li>
    </ul>
    <div class="herolist-box">
      <!-- 英雄介绍内容 -->
      <div class="herolist-hero">
        <!-- 英雄筛选部分 -->
        <div class="herolist-types">
          <!-- 综合游戏职业 -->
          <div class="types-left">
            <span>综合</span>
            <span>游戏职业</span>
          </div>
          <!-- 单选修改 -->
          <div class="types-center">
            <p>
              <span>
                <input type="radio" id="r1" name="zh">
                <label for="r1">本周免费</label>
              </span>
              <span>
                <input type="radio" id="r2" name="zh">
                <label for="r2">新手推荐</label>
              </span>
            </p>
            <p>
              <span>
                <input type="radio" id="r3" name="zh" checked>
                <label for="r3">全部</label>
              </span>
              <span>
                <input type="radio" id="r4" name="zh">
                <label for="r4">坦克</label>
              </span>
              <span>
                <input type="radio" id="r5" name="zh">
                <label for="r5">战士</label>
              </span>
              <span>
                <input type="radio" id="r6" name="zh">
                <label for="r6">刺客</label>
              </span>
              <span>
                <input type="radio" id="r7" name="zh">
                <label for="r7">法师</label>
              </span>
              <span>
                <input type="radio" id="r8" name="zh">
                <label for="r8">射手</label>
              </span>
              <span>
                <input type="radio" id="r9" name="zh">
                <label for="r9">辅助</label>
              </span>
            </p>
          </div>
          <!-- input输入框 -->
          <div class="types-right">
            <input type="text" placeholder="请输入你想要搜索的英雄名">
            <a href=""></a>
          </div>
        </div>
        <!-- 游戏人物 -->
        <ul class="herolist-content">
          <li><img src="../../assets/hero/hero/1.webp"/><span>空空儿</span></li>
          <li><img src="../../assets/hero/hero/2.webp"/><span>苍</span></li>
          <li><img src="../../assets/hero/hero/3.webp"/><span>影</span></li>
          <li><img src="../../assets/hero/hero/4.webp"/><span>少司缘</span> </li>
          <li><img src="../../assets/hero/hero/5.webp"/><span>元流之子(坦克)</span></li>
          <li><img src="../../assets/hero/hero/6.webp"/><span>元流之子(法师)</span></li>
          <li><img src="../../assets/hero/hero/7.webp"/><span>大司命</span></li>
          <li><img src="../../assets/hero/hero/8.webp"/><span>敖隐</span></li>
          <li><img src="../../assets/hero/hero/9.webp"/><span>海诺</span></li>
          <li><img src="../../assets/hero/hero/10.webp"/><span>朵莉亚</span></li>
          <li><img src="../../assets/hero/hero/11.webp"/><span>亚连</span></li>
          <li><img src="../../assets/hero/hero/12.webp"/><span>姬小满</span></li>
        </ul>

      </div>
      <!-- 局内道具内容 -->
      <div class="herolist-prop">
        <div class="prop-types">
          <p>
            <span>
              <input type="radio" id="ra1" name="tool">
              <label for="ra1">常规模式</label>
            </span>
            <span>
              <input type="radio" id="ra2" name="tool">
              <label for="ra2">边境突围模式</label>
            </span>
          </p>
          <p>
            <span>
              <input type="radio" id="ra3" name="tool" checked>
              <label for="ra3">全部</label>
            </span>
            <span>
              <input type="radio" id="ra4" name="tool">
              <label for="ra4">攻击</label>
            </span>
            <span>
              <input type="radio" id="ra5" name="tool">
              <label for="ra5">法术</label>
            </span>
            <span>
              <input type="radio" id="ra6" name="tool">
              <label for="ra6">防御</label>
            </span>
            <span>
              <input type="radio" id="ra7" name="tool">
              <label for="ra7">移动</label>
            </span>
            <span>
              <input type="radio" id="ra8" name="tool">
              <label for="ra8">打野</label>
            </span>
            <span>
              <input type="radio" id="ra9" name="tool">
              <label for="ra9">游走</label>
            </span>
          </p>
        </div>
        <ul class="prop-content">
          <li>
            <img src="../../assets/hero/prop/1.webp"/>
            <span>铁剑</span>
            <div class="detail">
              <div class="detail-img">
                <img src="../../assets/hero/prop/1.webp"/>
                <span>+25物理攻击</span>
              </div>
              <div class="detail-text">
                <h1>铁剑</h1>
                <p>售价：150</p>
                <p>总价：300</p>
              </div>
              
            </div>
          </li>
          <li>
            <img src="../../assets/hero/prop/1.webp"/>
            <span>铁剑</span>
            <div class="detail">
              <div class="detail-img">
                <img src="../../assets/hero/prop/1.webp"/>
                <span>+25物理攻击</span>
              </div>
              <div class="detail-text">
                <h1>铁剑</h1>
                <p>售价：150</p>
                <p>总价：300</p>
              </div>
              
            </div>
          </li>
          <li>
            <img src="../../assets/hero/prop/1.webp"/>
            <span>铁剑</span>
            <div class="detail">
              <div class="detail-img">
                <img src="../../assets/hero/prop/1.webp"/>
                <span>+25物理攻击</span>
              </div>
              <div class="detail-text">
                <h1>铁剑</h1>
                <p>售价：150</p>
                <p>总价：300</p>
              </div>
              
            </div>
          </li>
          <li>
            <img src="../../assets/hero/prop/1.webp"/>
            <span>铁剑</span>
            <div class="detail">
              <div class="detail-img">
                <img src="../../assets/hero/prop/1.webp"/>
                <span>+25物理攻击</span>
              </div>
              <div class="detail-text">
                <h1>铁剑</h1>
                <p>售价：150</p>
                <p>总价：300</p>
              </div>
              
            </div>
          </li>
          <li>
            <img src="../../assets/hero/prop/1.webp"/>
            <span>铁剑</span>
            <div class="detail">
              <div class="detail-img">
                <img src="../../assets/hero/prop/1.webp"/>
                <span>+25物理攻击</span>
              </div>
              <div class="detail-text">
                <h1>铁剑</h1>
                <p>售价：150</p>
                <p>总价：300</p>
              </div>
              
            </div>
          </li>
          <li>
            <img src="../../assets/hero/prop/1.webp"/>
            <span>铁剑</span>
            <div class="detail">
              <div class="detail-img">
                <img src="../../assets/hero/prop/1.webp"/>
                <span>+25物理攻击</span>
              </div>
              <div class="detail-text">
                <h1>铁剑</h1>
                <p>售价：150</p>
                <p>总价：300</p>
              </div>
              
            </div>
          </li>
          <li>
            <img src="../../assets/hero/prop/1.webp"/>
            <span>铁剑</span>
            <div class="detail">
              <div class="detail-img">
                <img src="../../assets/hero/prop/1.webp"/>
                <span>+25物理攻击</span>
              </div>
              <div class="detail-text">
                <h1>铁剑</h1>
                <p>售价：150</p>
                <p>总价：300</p>
              </div>
              
            </div>
          </li>
          <li>
            <img src="../../assets/hero/prop/1.webp"/>
            <span>铁剑</span>
            <div class="detail">
              <div class="detail-img">
                <img src="../../assets/hero/prop/1.webp"/>
                <span>+25物理攻击</span>
              </div>
              <div class="detail-text">
                <h1>铁剑</h1>
                <p>售价：150</p>
                <p>总价：300</p>
              </div>
              
            </div>
          </li>
          <li>
            <img src="../../assets/hero/prop/1.webp"/>
            <span>铁剑</span>
            <div class="detail">
              <div class="detail-img">
                <img src="../../assets/hero/prop/1.webp"/>
                <span>+25物理攻击</span>
              </div>
              <div class="detail-text">
                <h1>铁剑</h1>
                <p>售价：150</p>
                <p>总价：300</p>
              </div>
              
            </div>
          </li>
          <li>
            <img src="../../assets/hero/prop/1.webp"/>
            <span>铁剑</span>
            <div class="detail">
              <div class="detail-img">
                <img src="../../assets/hero/prop/1.webp"/>
                <span>+25物理攻击</span>
              </div>
              <div class="detail-text">
                <h1>铁剑</h1>
                <p>售价：150</p>
                <p>总价：300</p>
              </div>
              
            </div>
          </li>
          <li>
            <img src="../../assets/hero/prop/1.webp"/>
            <span>铁剑</span>
            <div class="detail">
              <div class="detail-img">
                <img src="../../assets/hero/prop/1.webp"/>
                <span>+25物理攻击</span>
              </div>
              <div class="detail-text">
                <h1>铁剑</h1>
                <p>售价：150</p>
                <p>总价：300</p>
              </div>
              
            </div>
          </li>
          <li>
            <img src="../../assets/hero/prop/1.webp"/>
            <span>铁剑</span>
            <div class="detail">
              <div class="detail-img">
                <img src="../../assets/hero/prop/1.webp"/>
                <span>+25物理攻击</span>
              </div>
              <div class="detail-text">
                <h1>铁剑</h1>
                <p>售价：150</p>
                <p>总价：300</p>
              </div>
              
            </div>
          </li>
        </ul>
      </div>
      <!-- 召唤师技能内容 -->
      <div class="herolist-skill">
        <ul class="skill-types">
          <li><img class="active-img" src="../../assets/hero/skill/1.webp"/><span class="active-span">惩戒</span></li>
          <li><img src="../../assets/hero/skill/1.webp"/><span>惩戒</span></li>
          <li><img src="../../assets/hero/skill/1.webp"/><span>惩戒</span></li>
          <li><img src="../../assets/hero/skill/1.webp"/><span>惩戒</span></li>
          <li><img src="../../assets/hero/skill/1.webp"/><span>惩戒</span></li>
          <li><img src="../../assets/hero/skill/1.webp"/><span>惩戒</span></li>
          <li><img src="../../assets/hero/skill/1.webp"/><span>惩戒</span></li>
          <li><img src="../../assets/hero/skill/1.webp"/><span>惩戒</span></li>
        </ul>
        <ul class="skill-content">
          <img src="../../assets/hero/skill/1Img.webp" alt="">
          <div class="skill-text">
            <h1>惩戒</h1>
            <p>
              LV.1解锁
            </p>
            <p>
              30秒CD：对身边的野怪和小兵造成真1500点的实伤害并眩晕1秒
            </p>
          </div>
        </ul>
        
      </div>
    </div>


  </div>


  <!-- 右侧下载二维码 -->
  <div class="down-img">
    <img src="../../assets/common/wzry_qrcode2.webp">
  </div>
</body>

</html>